<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/head"></head>
<title>封面管理</title>
<link rel="stylesheet" th:href="@{/admin/css/cover.css}">
<body>
<!-- vue入口 -->
<div id="app">
    <div :class="'app-wrapper' + sidebarFlag">
        <!-- aside -->
        <div th:replace="admin/common/side"></div>

        <!-- container -->
        <el-container class="main-container">
            <!-- header -->
            <div style="background-color: rgb(84, 92, 100);" th:replace="admin/common/header"></div>

            <!-- main -->
            <el-main class="app-main">
                <el-card>
                    <h2>文章封面管理</h2>
                    <el-row :gutter="40" class="panel-group" style="justify-content: end;">
                        <el-col :xs="24" :sm="24" :lg="6" class="card-panel-col" v-for="item in article" :key="item.id">
                            <el-card class="box-card-component" style="margin-left:8px;">
                                <div slot="header" class="box-card-header">
                                    <img :src="item.cover">
                                </div>
                                <div class="footer">
                                    <span>{{item.title}}</span>
                                    <div class="bottom clearfix">
                                        <time class="time">{{item.publishTime}}</time>
                                        <el-button type="text" @click="editBtn(item.id)" class="button">编辑</el-button>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                    <!-- 分页 -->
                    <div class="pagination">
                        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageConf.pageCode"
                                :page-sizes="pageConf.pageOption"
                                :page-size="pageConf.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageConf.totalPage">
                        </el-pagination>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <el-dialog title="修改文章封面图片" :visible.sync="editDialog" width="30%" :append-to-body='true' :before-close="handleClose">
        <span>
            <el-card>
                <el-upload action="/admin/upload" multiple drag name="file" list-type="picture-card" :limit="1"
                        :on-exceed="onExceed"
                        :file-list="fileList"
                        :before-upload="beforeUpload"
                        :on-preview="handlePreview"
                        :on-success="handleSuccess"
                        :on-remove="handleRemove">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-card>
        </span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editDialog = false">取 消</el-button>
            <el-button type="primary" @click="edit">确 定</el-button>
        </span>
    </el-dialog>
</div>
</body>
<div th:replace="admin/common/js"></div>
<script type="text/javascript" th:src="@{/admin/js/cover.js}"></script>
</html>
